<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<script type="text/javascript" src="./js/common.js"></script>
	</head>
	<body>
		<div class="container login">
			<div class="bg-dark mui-text-center mgt-10 pos-relative">
				<div class="bg-dark flex flex-jc-around pdt-10 pos-relative">
					<img src="./img/arbicap_logo.png" style="height: 80px" alt="">
					<h1 style="height: 80px;line-height: 80px;" class="cl-white">阿尔卑斯</h1>
				</div>
			</div>
			<br>
			<h3 class="mui-text-center">欢迎使用</h3>
			<br>
			<div class="pd-10">
				<form class="mui-input-group bg-dark">
					<div class="mui-input-row">
						<label>账号</label>
						<input type="text" name="account" class="mui-input-clear" placeholder="请输入账号">
					</div>
					<div class="mui-input-row mgt-10">
						<label>密码</label>
						<input type="password" name="password" class="mui-input-password" placeholder="请输入密码">
					</div>
				</form>
				<p class="mui-text-center mgt-10">还没有账户？去 <a class="" href="./register.html">注册</a></p>
				<div class="register">
					<button type="button" class="mui-btn bd-radius-20 bg-white w100" style="margin-top: 13vh;font-size: 20px">登录</button>
				</div>
			</div>
		</div>
		<script>
			mui('.register').on('tap', 'button', function() {
				let account = mui('input[name="account"]')[0].value
				let password = mui('input[name="password"]')[0].value

				const reg = /^1[3456789]\d{9}$/
				if (account.length === 0) {
					mui.toast('请填写您的账号', {
						duration: 'long',
						type: 'div'
					})
					return
				} else if (!reg.test(account)) {
					mui.toast('账号是您的手机号码', {
						duration: 'long',
						type: 'div'
					})
					return
				}

				if (password.length === 0) {
					mui.toast('请设置密码', {
						duration: 'long',
						type: 'div'
					})
					return
				} else if (password.length < 6) {
					mui.toast('密码长度不能小于6位', {
						duration: 'long',
						type: 'div'
					})
				}

				mui.ajax(HOST + 'v1/login', {
					data: {
						account: account,
						passwd: password
					},
					dataType: 'json', //服务器返回json格式数据
					type: 'post', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					success: function(res) {
						//服务器返回响应，根据响应结果，分析是否登录成功；
						if (res.result === 0) {
							localStorage.setItem('MEMBERS', res.data.members_id)
							localStorage.setItem('CODE', res.data.my_invite_code)
							location.href = './index.html'
						} else {
							mui.toast(res.message, {
								duration: 'long',
								type: 'div'
							})
						}
					},
					error: function(xhr, type, errorThrown) {
						mui.toast(errorThrown, {
							duration: 'long',
							type: 'div'
						})
					}
				});
			})
		</script>
	</body>
</html>
